<template>
  <view class="audio-wrapper item-right-value">
    <view class="left-i">
      <image v-if="play == false" class="start-img" :src="baseImgUrl + 'audio-start.png'" @click="playAudio">
      </image>
      <image v-else class="pause-img" :src="baseImgUrl + 'audio-pause.png'" @click="pauseAudio"></image>
    </view>
    <view class="right-i">
      <!-- <div class="a-item">
        <div class="a-item-left">
          <div class="audio-text">音频信息</div>
          <div class="audio-size">{{ formatBytes(fileSize) }}</div>
        </div>
      </div> -->
      <div class="a-item">
        <div class="a-item-time">
          <div>{{ formatMilliseconds(current) }}</div>
          <div style="flex: 1;margin: 0 8rpx;">
            <u-line-progress :percentage="percentage" activeColor="#2488F5" :height="5" :showText="false" />
          </div>
          <div>{{ formatMilliseconds(duration) }}</div>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
  import {
    formatMilliseconds,
    formatBytes
  } from '@/utils/util.js'

  export default {
    props: {
      audioSrc: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 录音
        baseImgUrl: this.$baseImgUrl,
        play: false,
        // 百分比
        percentage: 0,
        // 实例化音频组件
        audioContext: null,
        // 总时长
        duration: 0,
        // 文件大小
        fileSize: 0,
        // 当前播放时间
        current: 0,
        intervalID: null
      }
    },

    onReady() {
      this.initAudio()
    },
    destroyed() {
      this.audioContext.destroy()
      clearInterval(this.intervalID)
    },
    methods: {
      formatMilliseconds,
      formatBytes,
      // 初始化 音频
      initAudio() {
        this.audioContext = uni.createInnerAudioContext();
        this.audioContext.src = this.audioSrc

        this.audioContext.onPlay(() => {});

        this.audioContext.onError((err) => {
          console.log(err);
        });

        this.audioContext.onEnded(() => {
          this.percentage = 100;
          this.current = 0;
          this.play = false;
        });

        this.audioContext.onTimeUpdate(() => {
          this.current = this.audioContext.currentTime * 1000;
          if (!this.duration) {
            this.duration = this.audioContext.duration * 1000;
          }
          if (this.duration > 0) {
            if (this.current === this.duration) {
              this.percentage = 100;
              return;
            }
            // this.percentage = parseInt(((parseInt(value) / parseInt(this.duration)) * 100).toFixed(2))
            // 计算百分数，也就是进度条的长度
            this.percentage = Number(
              ((this.current / this.duration) * 100).toFixed(4)
            );
          }
        });

        this.audioContext.onCanplay(() => {
          this.audioContext.volume = 0;
          this.audioContext.play();
          this.audioContext.pause();
          this.audioContext.volume = 1;
          // 获取音频的播放时长（单位：秒）
          this.intervalID = setInterval(() => {
            if (this.audioContext.duration !== 0) {
              clearInterval(this.intervalID); // 清除定时器
              this.duration = this.audioContext.duration * 1000;
            }
          }, 100)
        });
      },
      formatMilliseconds,
      formatBytes,

      // 播放音频
      playAudio() {
        this.play = true;
        this.percentage = 0;
        this.audioContext.play();
      },
      pauseAudio() {
        this.play = false;
        this.audioContext.pause();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .audio-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10rpx;
    background: #F8FCFF;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    border: 1rpx solid #F1F9FF;
    margin: 0 auto;

    .left-i {
      flex-shrink: 0;
      margin-right: 30rpx;

      .start-img,
      .pause-img {
        width: 52rpx;
        height: 52rpx;
      }
    }

    .right-i {
      flex: 1;

      .a-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .a-item-left {
          display: flex;

          .audio-text {
            font-weight: 500;
            font-size: 26rpx;
            color: #5F6576;
            margin-right: 10rpx;
          }

          .audio-size {
            font-weight: 400;
            font-size: 22rpx;
            color: #A1A4AE;
          }
        }

        .text-delete {
          font-weight: 400;
          font-size: 24rpx;
          color: #FF6D6D;
        }

        .a-item-time {
          display: flex;
          align-items: center;
          width: 100%;
          font-weight: 400;
          font-size: 22rpx;
          color: #A1A4AE;
          justify-content: space-between;
        }
      }
    }
  }
</style>